<template>
  <div class="work">
      <div class="header">
        <el-form :model="queryParamss" ref="queryForm"  v-show="showSearch" :inline="true"  label-width="68px">
            <el-form-item label="反馈时间" class="recordName">
                <el-date-picker v-model="dateRange" size="small" style="width: 240px" value-format="yyyy-MM" type="monthrange" 
                range-separator="-" start-placeholder="开始月份" end-placeholder="结束月份"></el-date-picker>
            </el-form-item>
            <el-form-item label="发生阶段" class="problemStage">
                <el-select v-model="queryParamss.problemStage" placeholder="请选择问题发生阶段" clearable size="small">
                <el-option
                    v-for="dict in problemStageOptions"
                    :key="dict.dictValue"
                    :label="dict.dictLabel"
                    :value="dict.dictValue"
                />
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
            <el-form-item>
                <span style="color:#00FFE3">默认查询当前年的数据</span>
            </el-form-item>
            <div style="float: right;">
                <el-switch
                    v-model="errorrate.switch"
                    active-color="#2E9AFE"
                    inactive-color="#A4A4A4">
                </el-switch>
            </div>
        </el-form>
        
      </div>
      <div  class="bold">
            <div class="middle">
        
                <AllAnalyzeBarCharts class="middleTwo" :chart-data="allBarChartRate"/>
                <AnalyzeBarCharts class="middleTwo" :chart-data="allBarChartRateBySystem"/>
                <AnalyzeBarCharts class="middleTwo" :chart-data="allBarChartRateByQuestion"/>
      
            </div>
            <div class="footer">
                <!-- :queryRatePieChartsByGroupsQy="openGroupsErrorrateDetail" -->
                <AnalyzePieCharts class="middleTwo" :queryAllRateBarChartsBygroups="openGroupsErrorrateDetail" :chart-data="allPieChartRateBySystemQy"/>
                <AnalyzePieCharts class="middleTwo" :queryAllRateBarChartsBygroups="openGroupsErrorrateDetail" :chart-data="allPieChartRateBySystemZx"/>
                <AnalyzePieCharts class="middleTwo" :queryAllRateBarChartsBygroups="openGroupsErrorrateDetail" :chart-data="allPieChartRateBySystemZy"/>
            </div>
      </div>
      <el-dialog id="groupsErrorrateDetail" :destroy-on-close="true" :title="errorrate.title" :visible.sync="errorrate.open" width="80%" :close="resetGroupsErrorrateDetail" append-to-body>
            <div>
                <groupsErrorDetial :querygroupsErrorrateParam="querygroupsErrorrateParam" v-if="errorrate.open"/>
            </div>
      </el-dialog>
</div>      
</template>

<script>
import { selectAllTrialRate,selectAllTrialRateBySystem,selectAllTrialRateBySystemQy,selectAllTrialRateBySystemZx,selectAllTrialRateBySystemZy,selectAllTrialRateByQuestion} from "@/api/statistics/errorrate/errorrateTrialSystem.js";
import { getToken } from '@/utils/auth';
import echarts from 'echarts';

// 试制
import AnalyzeBarCharts from '../trial/barcharts/AnalyzeBarCharts';
import AllAnalyzeBarCharts from '../trial/barcharts/AllAnalyzeBarCharts';
import AnalyzePieCharts from '../trial/piecharts/AnalyzePieCharts';
import groupsErrorDetial from '../trial/detail/groups';
export default {
    name: "errorrate",
    components:{
        // 试制
        AnalyzeBarCharts,
        AnalyzePieCharts,
        AllAnalyzeBarCharts,
        groupsErrorDetial
    },
    data() {
        return {
            // 日期范围
            dateRange: [],
            // 显示搜索条件
            showSearch: true,
            problemStageOptions: [],
            // 试制
            allBarChartRate:{},
            allBarChartRateBySystem:{},
            allPieChartRateBySystemQy:{},
            allPieChartRateBySystemZx:{},
            allPieChartRateBySystemZy:{},
            allBarChartRateByQuestion:{},
            // 查询参数
            queryParamss: {
                pageNum: 1,
                pageSize: 10,
                problemStage: null,
                // dateRange: [],
               // recordName: null,
            },
             //是否输出
            isSubmitFileOptions:[],
            //状态
            stateOptions: [],
            // 是否超时字典
            isTimeOutOptions: [],
            errorrate: {
                title:"",
                open:false,
            },
            querygroupsErrorrateParam:{
                params:{
                    beginProblemFeedbackTime:null,
                    endProblemFeedbackTime:null
                }
            }
        }
    },
    created() {
        this.getList();
        this.getDicts("qa_stage_type").then(response => {
            this.problemStageOptions = response.data;
        });
    },
    mounted () {
        let that = this

        //试制
        this.queryAllRateBarCharts();
        this.queryAllRatePieChartsBySystem();
        this.queryAllRatePieChartsBySystemQy();
        this.queryAllRatePieChartsBySystemZx();
        this.queryAllRatePieChartsBySystemZy();
        this.queryAllRatePieChartsByQuestion();
    
    },
    activated(){
    
    },
    methods: {
        // 是否超时字典翻译
        isTimeOutFormat(row, column) {
            return this.selectDictLabel(this.isTimeOutOptions, row.isTimeOut);
        },
        // 是否提交输出物字典翻译
        isSubmitFileFormat(row, column) {
            return this.selectDictLabel(this.isSubmitFileOptions, row.isSubmitFile);
        },
        // 任务状态翻译
        stateFormat(row, column) {
            return this.selectDictLabel(this.stateOptions, row.state);
        },
        // getWorkList(){
        //      this.work.loading = true;
        //     listProcess(this.queryParamss).then(response => {
        //         this.work.processList = response.rows;
        //         this.work.total = response.total;
        //         this.work.loading = false;
        //     });
        // },
        /** 查询所有图表 */
        getList() {
            this.loading = true;
            //this.queryParamss.systemId = "";

            //试制
            this.queryAllRateBarCharts(this.addDateRange(this.queryParamss,this.dateRange));
            this.queryAllRatePieChartsBySystem(this.addDateRange(this.queryParamss,this.dateRange));
            this.queryAllRatePieChartsBySystemQy(this.addDateRange(this.queryParamss,this.dateRange));
            this.queryAllRatePieChartsBySystemZx(this.addDateRange(this.queryParamss,this.dateRange));
            this.queryAllRatePieChartsBySystemZy(this.addDateRange(this.queryParamss,this.dateRange));
            this.queryAllRatePieChartsByQuestion(this.addDateRange(this.queryParamss,this.dateRange));
            
            this.loading = false;
            this.resetGroupsErrorrateDetail();
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.dateRange = [];
            this.queryParamss.recordName = "";
            this.queryParamss.problemStage = "";
            this.handleQuery(); 
            
            //试制
            this.queryAllRateBarCharts();
            this.queryAllRatePieChartsBySystem();
            this.queryAllRatePieChartsBySystemQy();
            this.queryAllRatePieChartsBySystemZx();
            this.queryAllRatePieChartsBySystemZy();
            this.queryAllRatePieChartsByQuestion();
            
        },

        //试制问题差错比率   
        queryAllRateBarCharts(params){
                selectAllTrialRate(params).then(response => {
                  
                    let newObject = {
                        xdata:[],
                        ydata:[],
                        tdata:[]
                    }  
                    response.rateList.forEach((item,index)=>{
                        newObject.xdata.push(item.type)
                        newObject.ydata.push(item.rate)
                    })
                    newObject.tdata.push("试制问题差错比率");
                    this.allBarChartRate = newObject;  
                });
            },
        // 系统试制问题总体情况
        queryAllRatePieChartsBySystem(params){
            selectAllTrialRateBySystem(params).then(response => {
                // console.log('response+-+-+-+-',response)
                    let newObject = {
                        xdata:[],
                        ydata:[],
                        tdata:[]
                    }  
                    response.rateListBar.forEach((item,index)=>{
                        // 0整车 1动传 2底盘 3车身 4车电
                        // if (item.system=0){
                        //     newObject.xdata.push('整车')
                        //     //newObject.ydata.push(item.amount)
                        // } else if(item.system=1){
                        //     newObject.xdata.push('动传')
                        //    // newObject.ydata.push(item.amount)
                        // } else if(item.system=2){
                        //     newObject.xdata.push('底盘')
                        //     //newObject.ydata.push(item.amount)
                        // } else if(item.system=3){
                        //     newObject.xdata.push('车身')
                        //     //newObject.ydata.push(item.amount)
                        // } else if(item.system=4){
                        //     newObject.xdata.push('车电')
                        //     //newObject.ydata.push(item.amount)
                        // }

                            newObject.xdata.push(item.system)
                            newObject.ydata.push(item.amount)
                        })
                        newObject.tdata.push("按系统分类试制问题数概况");
                        this.allBarChartRateBySystem = newObject; 
                });
            },

        //  系统试制问题总体情况-按车型分(0 牵引车; 1 自卸车; 2 专用车)
        queryAllRatePieChartsBySystemQy(params){
            selectAllTrialRateBySystemQy(params).then(response => {
                // console.log('response+-+-+-+-',response)
                let newObject = {
                    xdata:[],
                    tdata:[],
                    typedata:[],
                    systemdata:[]
                }  
                response.rateListPie.forEach((item,index)=>{
                    // var data = item.dataList;
                    // console.log('item+-+-+-+-',item)
                        // for(var i = 0; i < item.length; i++){
                            newObject.xdata.push({"value": item.rate, "name":item.system})
                        // }     
                        newObject.typedata.push(item.type)
                        newObject.systemdata.push(item.systemId)


                    })
                
                newObject.tdata.push("系统问题的占比-牵引车");
                this.allPieChartRateBySystemQy = newObject;  
            });
        },  

        queryAllRatePieChartsBySystemZx(params){
            selectAllTrialRateBySystemZx(params).then(response => {
                // console.log('response+-+-+-+-',response)
                let newObject = {
                    xdata:[],
                    tdata:[],
                    typedata:[],
                    systemdata:[]
                }  
                response.rateListPie.forEach((item,index)=>{
                    // var data = item.dataList;
                    //console.log('item+-+-+-+-',item)
                        // for(var i = 0; i < item.length; i++){
                            newObject.xdata.push({"value": item.rate, "name":item.system})
                        // } 
                        newObject.typedata.push(item.type)
                        newObject.systemdata.push(item.systemId)
     
                    })
                
                newObject.tdata.push("系统问题的占比-自卸车");
                this.allPieChartRateBySystemZx = newObject;  
            });
        },  

        queryAllRatePieChartsBySystemZy(params){
            selectAllTrialRateBySystemZy(params).then(response => {
                // console.log('response+-+-+-+-',response)
                let newObject = {
                    xdata:[],
                    tdata:[],
                    typedata:[],
                    systemdata:[]
                }  
                response.rateListPie.forEach((item,index)=>{
                    // var data = item.dataList;
                    //console.log('item+-+-+-+-',item)
                        // for(var i = 0; i < item.length; i++){
                            newObject.xdata.push({"value": item.rate, "name":item.system})
                        // }    
                        newObject.typedata.push(item.type)
                        newObject.systemdata.push(item.systemId)
  
                    })
                
                newObject.tdata.push("系统问题的占比-专用车");
                this.allPieChartRateBySystemZy = newObject;  
            });
        },  

             // 试制问题数量-按问题种类分
        queryAllRatePieChartsByQuestion(params){
            selectAllTrialRateByQuestion(params).then(response => {
                // console.log('response+-+-+-+-',response)
                    let newObject = {
                        xdata:[],
                        ydata:[],
                        tdata:[]
                    }  
                    response.rateListBar.forEach((item,index)=>{
                        
                            newObject.xdata.push(item.questionClassification)
                            newObject.ydata.push(item.amount)
                            
                        })
                        newObject.tdata.push("按问题种类分类问题数概况");
                        this.allBarChartRateByQuestion = newObject; 
                });
            },
        
        //系统详情弹窗
        openGroupsErrorrateDetail(params){

            // console.log(params,'----------------------22222222222222222222222222',params.systemId)
            this.querygroupsErrorrateParam = {};
            if(this.errorrate.switch == true&&params!=undefined &&undefined !=params.systemId){
                this.errorrate.open = true;
                this.errorrate.title = "";
                this.querygroupsErrorrateParam = params;
                this.querygroupsErrorrateParam.beginTime = this.dateRange[0];
                this.querygroupsErrorrateParam.endTime = this.dateRange[1];
                this.querygroupsErrorrateParam.problemStage = this.queryParamss.problemStage;
            }
            // console.log(this.querygroupsErrorrateParam,'----------------------333333333333333333')
        }, 
        resetGroupsErrorrateDetail(){
            this.errorrate.open = false;
            this.querygroupsErrorrateParam = {};
        }
    },
};
</script>
<style lang="scss">
.recordName .el-form-item__label{
    color:#fff;
    font-size: 12px;
} 
.problemStage .el-form-item__label{
    color:#fff;
    font-size: 12px;
}
.work{
    padding: 1em;
    background-color:#1d222a;
}
.header{
    margin-left: 15px;
}
.middle{
    display: flex;
    justify-content: space-between;
    
}
.middleTwo{
    background-image: url('./../../../assets/image/data1.png'); 
    background-size: 100% 100%;
    border-radius: 0%;
    margin-left:10px;
    margin-right:10px;
}

.footer{
    margin-top: 30px;
    display: flex;
    justify-content: space-between;
}
.GroupincomedistributionPie{
    width: 100%;
    height: 82%;
}

.w-line{
    width: 99%;
    height: 1px;
    border-top: solid #3c5e8f 1px;
    margin-left: 10px;
    margin-right: 10px;
}
.h-line{
    width: 1px;
    height: 99%;
    border-right: solid #3c5e8f 1px;
    margin-left: 10px;
    margin-right: 10px;
}
#groupsErrorrateDetail .el-dialog__header{
    padding: 0px; 
    padding-bottom: 0px;
}
</style>